<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style></style>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- <script src="./js/echarts.min.js"></script> -->
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script>

        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            toolbox: {

                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['销量', '销量1']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '价格',
                    min: -10,
                    max: 20,
                    interval: (20 - (-10)) / 5,
                    boundaryGap: [0.2, 0.2]
                },
                {
                    type: 'value',
                    scale: true,
                    name: '预购量',
                    min: -150,
                    max: 300,
                    interval: (300 - (-150)) / 5,
                }
            ],
            series: [{
                name: '价格',
                type: 'bar',
                yAxisIndex: 0,
                data: [15, 12, 16, 11, 16, 20],
            }, {
                name: '预购量',
                type: 'bar',
                yAxisIndex: 1,
                data: [-150, 120, 160, -110, 160, 200]
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>